<template>
    <div id="leave_list_page">
        <el-card class="leave_card">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb_post">
                <el-breadcrumb-item :to="{path: '/info'}">首页</el-breadcrumb-item>
                <el-breadcrumb-item>请假</el-breadcrumb-item>
                <el-breadcrumb-item>申请提交</el-breadcrumb-item>
            </el-breadcrumb>
            <el-form ref="leave_post_form" :model="form" label-width="80px" class="leave_post_form">
                <el-form-item label="假期类型" prop="type">
                    <el-select v-model="form.type" placeholder="假期类型">
                        <el-option label="出差" value="0"></el-option>
                        <el-option label="婚假" value="1"></el-option>
                        <el-option label="产假" value="2"></el-option>
                        <el-option label="年假" value="3"></el-option>
                        <el-option label="事假" value="4"></el-option>
                        <el-option label="病假" value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-col :span="4">
                        <el-date-picker type="date" placeholder="开始日期" v-model="form.startTime" style="width: 100%; margin-right: 10px;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-col :span="4">
                        <el-date-picker type="date" placeholder="结束日期" v-model="form.endTime" style="width: 100%; margin-right: 10px;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="申请理由" prop="reason">
                    <el-input type="textarea" v-model="form.reason" style="width:90%"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-s-promotion" style="margin-left: 5px" @click="leavePost">提交申请</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
      return {
        form: {
          reason: '',
          startTime: new Date(),
          endTime: '',
          type: '',
        }
      }
    },
    created() {
        //console.log(this.$store.state.department_id);
        //console.log(this.$store.state.auth);
    },
    methods: {
      leavePost() {
          let that = this;
          let postData = {
              Leave: {
                  appId: (parseInt(localStorage.getItem("leave_cnt")) + 1),
                  empId: that.$store.state.username,
                  empName: that.$store.state.emp_name,
                  empDeptID: that.$store.state.department_id.toString(),
                  empDeptName: that.$store.state.department,
                  reason: that.form.reason,
                  startTime: that.form.startTime,
                  endTime: that.form.endTime,
                  type: that.form.type,
                  state: '1'
              }
          };
          fetch('http://localhost:9095/AttendanceSystem/leave', {
              method: 'POST',
              body: JSON.stringify(postData),
              headers: new Headers({
                  'Content-Type': 'application/json',
                  'username': (that.$store.state.username),
                  'Token': (that.$store.state.token)
              })
          }).then(res => {
              if (res.status == 200) {
                  that.$message({
                      showClose: true,
                      message: '申请提交成功',
                      type: 'success'
                  });
                  let leave_cnt = localStorage.getItem("leave_cnt");
                  ++leave_cnt;
                  localStorage.setItem("leave_cnt", leave_cnt);
              }
              else {
                  that.$message({
                      showClose: true,
                      message: res.status + ' - 提交出现错误',
                      type: 'error'
                  });
              }
          }
          )
      }
    }
}
</script>

<style>
.leave_card {
    margin-top: 1%;
    margin-left: 3%;
    margin-right: 3%;
}
.breadcrumb_post {
    margin-left: 8px;
    margin-bottom: 20px;
}
</style>